<template>
  <div>
    <!-- <el-dialog top="5vh" :center="true" :title="title" :visible.sync="isAddModel" :before-close="bodyClose"> -->

    <el-form v-if="isAddModel" ref="form" class="fillIn" :model="form" :rules="rules">
      <el-form-item class="mgb-20" label="会员卡名" :label-width="formLabelWidth" prop="xlNmae">
        <el-input
          v-model="form.xlNmae"
          class="elInput"
          type="text"
          autocomplete="off"
          maxlength="20"
          show-word-limit
          @input="changeName"
        />
      </el-form-item>
      <el-form-item
        v-if="form.cardType !== 1"
        class="mgb-20"
        label="卡内包含"
        :label-width="formLabelWidth"
        prop="contain"
      >
        <el-input
          v-model.number="form.contain"
          class="elInput"
          type="text"
          autocomplete="off"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <i slot="suffix" style="font-style: normal;">{{
            form.cardType | giveType
          }}</i>
        </el-input>
      </el-form-item>
      <!-- v-if="form.cardType === 4" -->
      <el-form-item class="mgb-20" :label="sellingTitle" :label-width="formLabelWidth" prop="sellingPrice">
        <el-input
          v-model="form.sellingPrice"
          class="elInput"
          type="text"
          autocomplete="off"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <i slot="suffix" style="font-style: normal;">元</i>
        </el-input>
      </el-form-item>
      <el-form-item class="mgb-20" label="原价" :label-width="formLabelWidth" prop="originalPrice">
        <el-input
          v-model="form.originalPrice"
          class="elInput"
          type="text"
          autocomplete="off"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <i slot="suffix" style="font-style: normal;">元</i>
        </el-input>
      </el-form-item>
      <el-form-item
        v-if="form.cardType === 4"
        class="mgb-20"
        label="起步价"
        :label-width="formLabelWidth"
        prop="initial"
      >
        <el-input
          v-model="form.initial"
          class="elInput"
          type="text"
          autocomplete="off"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <i slot="suffix" style="font-style: normal;">元</i>
        </el-input>
      </el-form-item>
      <el-form-item v-if="form.cardType === 4" label="" :label-width="formLabelWidth" style="height: 10px;" prop="price">
        <span style="color: rgb(255, 187, 94);">提示：单次起步价6元起！</span>
      </el-form-item>
      <el-form-item class="mgb-20" label="购买设置" :label-width="formLabelWidth" prop="buySet">
        <el-input v-model.number="form.buySet" class="elInput" type="age" autocomplete="off" @input="changeContain">
          <i slot="suffix" style="font-style: normal;">{{
            form.cardType | giveType
          }}</i>
          <i slot="prefix" style="font-style: normal;">送</i>
        </el-input>
      </el-form-item>

      <!-- 消费限制 -->
      <el-form-item
        v-if="form.cardType === 4 || form.cardType === 3"
        class="mgb-20"
        label="消费限制"
        :label-width="formLabelWidth"
        prop="limitNull"
      >
        <!-- prop="limitNull" -->
        <el-input class="elInput" type="text" autocomplete="off" :disabled="true" value="套内消费完" />
      </el-form-item>
      <el-form-item v-else class="mgb-20" label="消费限制" :label-width="formLabelWidth" prop="limit">
        <el-input
          v-model="form.limit"
          class="elInput"
          type="text"
          autocomplete="off"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <i slot="suffix" style="font-style: normal;">{{
            form.cardType === 1 ? "分钟/天" : "分钟/次"
          }}</i>
        </el-input>
      </el-form-item>
      <el-form-item
        class="mgb-20"
        label=""
        :label-width="formLabelWidth"
        prop="stop"
      >
        <!-- prop="limitNull" -->
        <el-input v-model="form.stop" class="elInput" type="age" autocomplete="off" value="套内消费完">
          <i slot="suffix" style="font-style: normal;">分钟/次</i>
        </el-input>
        <div style="color: rgb(255, 187, 94);">暂停限制</div>
      </el-form-item>
      <!-- 充值核销结算 核销单价✖实际消耗分钟数-->
      <el-form-item v-if="form.cardType === 4" label="核销结算" :label-width="formLabelWidth" prop="unitPrice">
        <el-col :span="7">
          <el-input
            v-model="form.unitPrice"
            placeholder="核销单价(元/分钟数)"
            type="tel"
            autocomplete="off"
            oninput="value=value.replace(/[^0-9.]/g,'')"
          >
            <i slot="suffix" style="font-style: normal;">元</i>
          </el-input>
        </el-col>
        <el-col :span="1" style="text-align: center;">✖</el-col>
        <el-col :span="5">
          <el-input :disabled="true" type="text" autocomplete="off" placeholder="实际消耗分钟数" />
        </el-col>
      </el-form-item>
      <!-- 月卡核销结算 核销结算-->
      <el-form-item
        v-else-if="form.cardType === 1"
        label="核销结算"
        :label-width="formLabelWidth"
        prop="unitPrice"
      >
        <el-input
          v-model="form.unitPrice"
          class="elInput"
          type="text"
          autocomplete="off"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <i slot="suffix" style="font-style: normal;">元/次</i>
        </el-input>
      </el-form-item>
      <!-- 次卡核销结算 实际购买价格➗套内包含次数x实际使用次数-->
      <el-form-item v-else-if="form.cardType === 2" label="核销结算" :label-width="formLabelWidth" prop="price">
        <el-col :span="7">
          <el-input :disabled="true" placeholder="实际购买价格" type="tel" autocomplete="off" />
        </el-col>
        <el-col :span="1" style="text-align: center;">➗</el-col>
        <el-col :span="5">
          <el-input :disabled="true" type="tel" autocomplete="off" placeholder="套内包含次数" />
        </el-col>
        <el-col :span="1" style="text-align: center;">✖</el-col>
        <el-col :span="5">
          <el-input :disabled="true" type="text" autocomplete="off" placeholder="实际使用次数" />
        </el-col>
      </el-form-item>
      <!-- 计时核销结算 实际购买价格➗套餐包含分钟数✖实际使用分钟数-->
      <el-form-item v-else-if="form.cardType === 3" label="核销结算" :label-width="formLabelWidth" prop="price">
        <el-col :span="7">
          <el-input :disabled="true" placeholder="核销单价(元/分钟数)" type="tel" autocomplete="off" />
        </el-col>
        <el-col :span="1" style="text-align: center;">➗</el-col>
        <el-col :span="5">
          <el-input :disabled="true" type="text" autocomplete="off" placeholder="套内包含时间" />
        </el-col>
        <el-col :span="1" style="text-align: center;">✖</el-col>
        <el-col :span="5">
          <el-input :disabled="true" type="text" autocomplete="off" placeholder="套内包含时间" />
        </el-col>
      </el-form-item>

      <el-form-item v-if="form.cardType===4" class="mgb-20" label="优惠有效期" :label-width="formLabelWidth" prop="end">
        <el-input class="elInput" autocomplete="off" value="套内消费完" :disabled="true" />
      </el-form-item>
      <el-form-item v-else class="mgb-20" :label="validity" :label-width="formLabelWidth" prop="term">
        <el-input v-model.number="form.term" type="age" class="elInput" autocomplete="off">
          <i slot="suffix" style="font-style: normal;">天</i>
        </el-input>
      </el-form-item>
      <el-form-item
        v-if="form.cardType !== 4 && form.cardType !== 3"
        class="mgb-20"
        label="截止时间"
        :label-width="formLabelWidth"
        prop="deadline"
      >
        <el-date-picker
          v-model="form.deadline"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
          @change="onDate"
        />
        <!-- value-format="timestamp" -->
        <span style="margin-left: 10px;">有效期：</span>
        <el-input v-model="form.day" :disabled="true" class="elInput" autocomplete="off" style="width: 100px;">
          <i slot="suffix" style="font-style: normal;">天</i>
        </el-input>
      </el-form-item>
      <el-form-item label="套餐图片" :label-width="formLabelWidth" prop="img">
        <div>
          <el-col :span="8">
            <upload-single v-model="form.img" dialog-width="30%" drag :type="4" @success="success" />
          </el-col>
        </div>
      </el-form-item>
      <div class="flex flex-jc-c">
        <el-button style="margin-right: 40px;" @click="bodyClose('form')">取消</el-button>
        <el-button type="warning" style="margin-left: 40px;" @click="save('form')">{{ addOrEdit }}</el-button>
      </div>
    </el-form>

    <!-- </el-dialog> -->
  </div>
</template>

<script>
import uploadSingle from '@/components/upLoad.vue'
export default {
  name: 'EditOrAdd',
  components: {
    uploadSingle
  },
  filters: {
    giveType(num) {
      let text = ''
      switch (Number(num)) {
        case 4:
          text = '元'
          break
        case 1:
          text = '天'
          break
        case 2:
          text = '次'
          break
        case 3:
          text = '分钟'
          break
        default:
          text = ''
          break
      }
      return text
    }
  },
  model: {
    prop: 'isAddModel'
  },
  /**
    * @property {Boolean} isAddModel 显示隐藏
    * @property {String, Number} title 标题
    * @property {Object} rules 正则验证
    * @property {String,Number} validity 有效期标题
    * @property {Object} form 表单绑定参数
    * @property {String} formLabelWidth Label宽度
    * @property {String, Number} addOrEdit 设置保存标题
    * @property {String, Number} sellingTitle 销售价或者原价标题
    * @event {Function} bodyClose 关闭
    * @event {Function} save 确定
    * @event {Function} success 图片上传成功
    * @event {Function} onDate 选择日期
  */
  props: {
    validity: {
      type: [String, Number],
      default: '优惠有效期'
    },
    isAddModel: {
      type: Boolean,
      default: false
    },
    title: {
      type: [String, Number],
      default: ''
    },
    rules: {
      type: Object,
      default: () => {}
    },
    form: {
      type: Object,
      default: () => {}
    },
    formLabelWidth: {
      type: String,
      default: ''
    },
    addOrEdit: {
      type: [String, Number],
      default: ''
    },
    sellingTitle: {
      type: [String, Number],
      default: ''
    }
  },

  methods: {
    changeName(e) {
      this.$emit('changeName', e)
    },
    changeContain(e) {
      this.$emit('changeContain', e)
    },
    bodyClose() {
      this.$emit('bodyClose')
      this.$refs['form'].clearValidate()
    },
    save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('save', formName)
          this.$refs[formName].clearValidate()
        } else {
          return false
        }
      })
    },
    success(img) {
      this.$emit('upload', img)
    },
    onDate(e) {
      this.$emit('onDate', e)
    }
  }
}
</script>

<style lang="scss" scoped>
  .fillIn {
    margin-top: 20px;
    .elInput {
      width: 200px;
    }
  }
  .mgb-20 {
    margin-bottom: 20px;
  }
</style>
